<template>
  <view class="detail-wrapper">
    <view class="view-block-s">
      <view class="p-14">
        <uni-section title="派车信息" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>
      </view>

      <view class="d-list">
        <view class="d-item">
          <view class="item-l">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">搅拌站名称</text>
          </view>
          <view class="val">{{dataObj.dataIp == '192.168.3.41' ? '1#搅拌站' : dataObj.dataIp == '192.168.3.42' ? '2#搅拌站' : ''}}</view>
        </view>

        <view class="d-item">
          <view class="item-l">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">生产盘数</text>
          </view>
          <view class="val">{{dataObj.pieCnt}}盘</view>
        </view>
        <view class="d-item">
          <view class="item-l">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">强度等级</text>
          </view>
          <view class="val">{{dataObj.code}}</view>
        </view>
        <view class="d-item">
          <view class="item-l">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">生产方量</text>
          </view>
          <view class="val">{{dataObj.prodMete}}方</view>
        </view>
        <view class="d-item">
          <view class="item-l">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">施工配合比</text>
          </view>
          <view class="val">{{dataObj.recipe}}</view>
        </view>
        <view class="d-item">
          <view class="item-l">
            <image class="icon" src="/static/images/fillout/list-tip.png" mode=""></image>
            <text class="lab">开始时刻</text>
          </view>
          <view class="val">{{dataObj.prodTimB}}</view>
        </view>
      </view>
    </view>

    <view class="view-block">
      <uni-section title="盘信息" type="line" titleColor=" #102C59" titleFontSize="32rpx"></uni-section>

      <scroll-view
        class="scroll-Y"
        scroll-y="true"
        refresher-background="#eee"
        :refresher-enabled="false"
        :refresher-triggered="triggered"
        :scroll-top="scrollTop"
        @scrolltolower="loadMoreData"
      >
        <view class="info-list">
          <view class="info-item" v-for="(item, index) in dataList" :key="item.id + '_' + index">
            <view class="item-l">
              <view class="item-col">
                <view class="lab">盘方量：</view>
                <text class="val">{{item.pieAmnt}}方</text>
              </view>
              <view class="item-col">
                <view class="lab">生产时间：</view>
                <text class="val">{{item.datTim}}</text>
              </view>
              <view class="item-col">
                <view class="lab">搅拌时间：</view>
                <text class="val">{{item.bldTim}}</text>
              </view>
            </view>
            <view class="item-r">
              <view class="d-btn" @click="openPop(item.id)">
                <text class="txt">查看</text>
              </view>
            </view>
          </view>
          
        </view>
      </scroll-view>
      
    </view>

    <uni-popup ref="popup" :is-mask-click="false" borderRadius="10rpx 10rpx 10rpx 10rpx" background-color="#fff">
      <view class="popup-content">
        <uni-section title="消耗信息" type="line" titleColor=" #102C59" titleFontSize="32rpx">
          <template #right>
            <uni-icons type="closeempty" size="20" color="#102C59" @click="closePop"></uni-icons>
          </template>
        </uni-section>

        <view class="hc-list">
          <view class="hc-item" v-for="item in detailList" :key="item.id">
            <view class="title">{{item.storage}}</view>

            <uni-row>
              <uni-col :span="12" class="pop-col">
                <i class="icon"></i>
                <view class="lab">配方值（kg）</view>
                <text class="val">{{ item.recAmnt }}</text>
              </uni-col>
              <uni-col :span="12" class="pop-col pop-col-end">
                <i class="icon"></i>
                <view class="lab">实际用量（kg）</view>
                <text class="val">{{ item.factAmnt }}</text>
              </uni-col>
              <uni-col :span="12" class="pop-col">
                <i class="icon"></i>
                <view class="lab">设定值（kg）</view>
                <text class="val">{{ item.planAmnt }}</text>
              </uni-col>
              <uni-col :span="12" class="pop-col pop-col-end">
                <i class="icon"></i>
                <view class="lab">相对偏差（%）</view>
                <text class="val">{{ item.xdpc }}%</text>
              </uni-col>
            </uni-row>
            
          </view>
          
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  
  import { getManual,getProductInfoPieceList,getProductInfoDosageList } from '@/api/monitorCenter/index.js';
export default {
  data() {
    return {
      id:'',
      dataObj:{},
      scrollTop: 0,
      triggered: false,
      hasMore: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      dataList: [],
      total: 0,
      detailList:[]
    };
  },
  onLoad(option) {
    if(option && option.id){
      this.id = option.id
      this.getData()
      this.getDataList();
    }
  },
  methods: {
    getData(){
      getManual(this.id).then(res=>{
        this.dataObj = res.data
      })
    },
    getDataList() {
      let params = { ...this.queryParams,id:this.id };
      getProductInfoPieceList(params)
        .then((res) => {
          if (res.code == 200) {
            this.dataList.push(...res.rows);
            this.total = res.total;
            this.hasMore = this.dataList.length < this.total;
          }
          this.triggered = false;
        })
        .catch((err) => {
          this.triggered = false;
        });
    },
    refreshData() {
      if (this.triggered) {
        return;
      }
      this.scrollTop = 0;
      this.triggered = true;
      this.queryParams.pageNum = 1;
      this.hasMore = true;
      this.dataList = [];
      this.getDataList();
    },
    loadMoreData() {
      if (this.triggered || !this.hasMore) {
        return;
      }
      this.queryParams.pageNum++;
      this.getDataList();
    },
    openPop(id) {
      console.log(id)
      let params = {
        pieceId:id,
        pageNum:1,
        pageSize:999
      }
      getProductInfoDosageList(params).then(res=>{
        this.detailList = res.rows
      })
      this.$refs.popup.open();
    },
    closePop() {
      this.$refs.popup.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.detail-wrapper {
  height: 100%;
  overflow-y: auto;
  .p-14 {
    padding: 0 14rpx;
  }
  .view-block-s {
    background: #fff;
    padding: 20rpx 16rpx 26rpx;
    margin-bottom: 40rpx;

    .d-list {
      .d-item {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid rgba(16, 44, 89, 0.2);
        padding: 24rpx 18rpx;

        font-weight: 500;
        font-size: 32rpx;
        color: rgba(16, 44, 89, 1);

        .item-l {
          .icon {
            width: 35rpx;
            height: 21rpx;
          }

          .lab {
            color: rgba(16, 44, 89, 0.8);
            padding-left: 10rpx;
          }
        }
      }
    }
  }

  .view-block {
    background: #fff;
    padding: 20rpx 30rpx;
    margin-bottom: 40rpx;
  }
  
  .scroll-Y{
    height: calc(100vh - 900rpx);
  }

  .info-list {
    margin-top: 36rpx;
    .info-item {
      width: 100%;
      height: 164rpx;
      display: flex;
      justify-content: space-between;
      background: url('/static/images/monitor/jbz/d-bg.png') no-repeat;
      background-size: 100%;
      padding: 14rpx 30rpx;
      margin-bottom: 30rpx;

      .item-l {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 24rpx;

        .item-col {
          display: flex;
          .lab {
            color: rgba(16, 44, 89, 0.5);
            width: 120rpx;
          }
          .val {
            color: rgba(16, 44, 89, 1);
          }
        }
      }

      .item-r {
        display: flex;
        align-items: center;

        .d-btn {
          width: 152rpx;
          height: 56rpx;
          background: linear-gradient(270deg, rgba(107, 58, 255, 0.1) 0%, rgba(46, 125, 255, 0.1) 100%);
          border-radius: 200rpx 200rpx 200rpx 200rpx;
          border: 1px solid #2e7dff;
          text-align: center;
          line-height: 54rpx;

          .txt {
            color: transparent;
            background-image: linear-gradient(90deg, rgba(107, 58, 255, 1) 0%, rgba(46, 125, 255, 1) 100%);
            background-clip: text;
            font-weight: 500;
            font-size: 32rpx;
          }
        }
      }
    }
  }
}

.popup-content {
  padding: 26rpx 18rpx;

  .hc-list {
    max-height: 65vh;
    overflow-y: auto;
    margin-top: 30rpx;
    .hc-item {
      width: 657rpx;
      height: 166rpx;
      background: rgba(46, 125, 255, 0.1);
      border-radius: 10rpx 10rpx 10rpx 10rpx;
      padding: 12rpx 26rpx;
      margin-bottom: 30rpx;
      
      .title {
        font-weight: 500;
        font-size: 32rpx;
        color: #102C59;
      }
      
      .pop-col {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        padding-top: 10rpx;
        
        .icon {
          width: 10rpx;
          height: 10rpx;
          background: #2E7DFF;
          border-radius: 50%;
        }
        
        .lab {
          padding-left: 9rpx;
          color: rgba(16, 44, 89, 0.5);
        }
        
      }
      .pop-col-end {
        justify-content: flex-end;
      }
      
    }
  }
}

::v-deep .uni-section .uni-section-header {
  padding: 0;
}
</style>
